<template>
  <div class="app-container">
    <XTablePage
    ref="tablePage"
              :columnsList="columnsList"
             :apiUrl="'/boss/users-position/users-position-list'"
              :method="'post'"
              :formConfig="formConfig"
              :toolButtons="tools"
              @toolbarButtonClickEvent="toolbarButtonClickEvent"
              :openForm="false"
              :export="false"
              :toolbarConfig="true">
              <template #actions="{ row }">
                    <el-link
                       size="medium"
                      type="primary"
                      icon="el-icon-edit"
                      @click="eidt(row)"
                    >编辑</el-link>
                    <el-link
                size="medium"
                type="danger"
                icon="el-icon-delete"
                @click="delItem(row)" >删除</el-link>
                   
      </template>
    </XTablePage>
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="500px">
      <el-form :model="ruleForm"  size="medium" :rules="rules" ref="ruleForm" label-width="90px">
        <el-form-item label="职务名称" prop="positionName">
           <el-input v-model="ruleForm.positionName" placeholder="请输入职务名称"></el-input>
        </el-form-item>
        <!-- <el-form-item label="角色编码" prop="roleCode">
           <el-input v-model="ruleForm.roleCode" placeholder="请输入角色编码"></el-input>
        </el-form-item> -->
        
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button  size="medium" icon="el-icon-close" @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" icon="el-icon-finished"  size="medium"
                       @click="submitForm('ruleForm')">确 定</el-button>
          </span>
    </el-dialog>
  </div>
</template>
<script>
import {savePosition,deletePosition} from '@/api/teachManage'
export default {
    name:'position',
  data() {
    return {
      columnsList: [
      {
         title: "序号",
         type: 'seq', 
         width: 60,
         fixed:'left',
         align:'center',
       },
        {field: 'positionName',  title: '职务名称'},
        {field: 'isEnable', title: '状态',
          slots: { default:(({row})=>{
            return [
            <el-switch
              v-model={row.isEnable}
              active-value={true}
              inactive-value={false}
              onChange={(value)=>{
                {/* this.$confirm('您确定要'+(value===false?'禁用':'启用')+'该职务？', '消息提示', {
                    }).then(() => {
                    }).catch(action => {
                        this.getDataList()
                    }); */}
                      savePosition({
                          usersPositionId:row.usersPositionId,
                          positionName:row.positionName,
                          isEnable:value
                      }).then((res)=>{
                            if (res.success) {
                              this.$message.success("更改成功");
                            } else {
                              this.$message.error(res.message||"操作失败");
                            }
                            this.getDataList()
                            })
                
              }}>
            </el-switch>
            ]
          }) 
         }
        },
        {field: 'userName',  title: '创建人'}, 
        {field: 'createTime',  title: '创建时间'},
        {title: '操作', width: 220, fixed: "right", slots: {default: 'actions'}}
      ],
      tools: [
          { code: 'btn-download', name: '添加职务', icon: 'el-icon-plus', status: 'primary' }
        ],
      formConfig: {
        titleAlign: 'center',
        items: [
          {
            field: 'positionName',
            title: '职务名称',
            span: 4,
            itemRender: {name: '$input', defaultValue: '', props: {placeholder: '请输职务名称', clearable: true}}
          },
          {
            align: 'center', 
            itemRender: {
              name: '$buttons',
              children: [
                {props: {type: 'submit', icon: 'el-icon-search', content: '查询', status: 'primary'}},
                {props: {type: 'reset', icon: 'el-icon-delete', content: '重置'}}]
            }
          }
        ]
      },
      ruleForm: {positionName:'',isEnable:false},
      rules: { 
        positionName: [{ required: true, message: '请输入职务名称', trigger: 'blur' }],
        roleCode: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
      },
      dialogVisible: false,
      title:''
    }
  },
  computed: {},
  created() {
  },
  methods: {
    getDataList(){
        this.$refs.tablePage.changeData({})
      },
     toolbarButtonClickEvent(code){
        this.dialogVisible=true
        this.ruleForm= {
          isEnable:true,
          positionName:'',
          usersPositionId:''
        }
        this.title='添加'
      },
      delItem(row){
       this.$confirm('您确定要删除该职务？', '消息提示', {
        }).then(() => {
          deletePosition([row.usersPositionId]).then((res)=>{
            if (res.success) {
                  this.$message.success("删除成功");
                  this.getDataList()
                } else {
                  this.$message.error(res.message||"操作失败");
                }
          })
          }).catch(action => {
        });
    },
      eidt(row){
        this.ruleForm= {
          positionName:row.positionName,
          isEnable:row.isEnable,
          usersPositionId:row.usersPositionId
        }
        this.title='编辑'
        this.dialogVisible=true
      },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
            if (valid) {
              savePosition(this.ruleForm).then((res) => {
                  if (res.success) {
                    this.$message.success("操作成功");
                    this.dialogVisible = false;
                    this.getDataList()
                  } else {
                    this.$message.error(res.message||"操作失败");
                  }
                });
           }
        })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>
<style lang="scss">
.app-container {
  padding: 10px;
  box-sizing: border-box;
  height: calc(100vh - 84px);
  overflow: auto;

  .type--datetime {
    z-index: 99 !important;
  }

  .imageSize {
    width: 300px;
    height: 150px;
  }
}
</style>
